<template>
    <div class="goods-list">
      <!-- 使用js的方式跳转到路由页面 -->
        <div class="goods-item" v-for="item in goodslist" :key="item.id"  @click="getDetials(item.id)">
          <img :src="item.img_url" alt="">
        <h1 class="title">{{item.title}}</h1>
        <div class="info">
          <p class="price">
              <span class="now">￥{{item.market_price}}</span>
              <span class="old">￥{{item.sell_price}}</span>
          </p>
          <p class="sell">
            <span>热卖中</span>
            <span>剩{{item.stock_quantity}}件</span>
          </p>
        </div>
        </div>
        
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'

export default {
  data(){
    return{
      pageindex:1,
      goodslist:[]
    }
  },
  created(){
    this.getGoodsList();
  },
  methods:{
     getGoodsList(){
       this.$http.get("api/getgoods?pageindex="+this.pageindex).then(
         result =>{
           if(result.body.status == 0){
             this.goodslist = this.goodslist.concat(result.body.message);
           }
           else{
             Toast("商品数据加载失败")
           }
         }
       )
     },
     getMore(){
       this.pageindex++;
       this.getGoodsList();
     },
     getDetials(id){

      // 1.最简单的方式
        //  this.$router.push('/home/goodsinfo/'+id)
        //  2.通过传递对象的方式
       this.$router.push({ path: '/home/goodsinfo/'+id })
     }
  }
}
</script>

<style lang="scss" scoped>
.goods-list{
  display: flex;
  flex-wrap: wrap;
  padding:7px;
  justify-content:space-between;
}
.goods-list .title{
  font-size: 14px;
}
.goods-list .goods-item img{
 width: 100%;
}

.goods-list .goods-item{
    width: 49%;
    border:1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin:3px 0;
    padding:3px;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    min-height: 289px;
}

.goods-list .goods-item .info{
  background-color: #eee;
}  
.goods-list .goods-item .info p{
  margin:0;
  padding:5px;
}

.goods-list .goods-item .info .price .now{
    color:red;
    font-weight: bold;
    font-size: 16px;
}

.goods-list .goods-item .info .price .old{
     text-decoration: line-through;
     font-size:14px;
}
.goods-list .goods-item .info .sell{
    display:flex;
    justify-content: space-between;
    font-size:14px;
} 



</style>